<template>
  <div v-show="visible">
    <div class="grid_cont">
      <div style="display: flex">
        <div style="width: 3px; height: 18px; background-color: rgba(204, 53, 47, 1)"></div>
        <div style="margin-left: 10px; font-size: 16px; line-height: 16px">{{
          formParams.title
        }}</div>
      </div>
      <div
        style="
          width: 100%;
          height: 1px;
          background-color: rgba(245, 245, 245, 1);
          margin-top: 16px;
          margin-bottom: 10px;
        "
      >
      </div>
      <div style="background: #fff; padding: 16px 16px 0 16px">
        <el-form
          ref="formRef"
          :rules="formRules"
          :model="formParams"
          style="margin-left: 14px"
          label-width="140px"
        >
          <el-form-item required label="公告分类：" prop="announcementType">
            <el-select
              filterable
              v-model="formParams.announcementType"
              placeholder=""
              placement="bottom"
              style="max-width: 730px"
            >
              <el-option v-for="item in treeData" :key="item.value" :value="item.label" />
            </el-select>
          </el-form-item>
          <el-form-item required label="标题：" prop="topic">
            <el-input v-model="formParams.topic" style="max-width: 730px" />
          </el-form-item>
          <el-form-item required label="正文：" prop="content">
            <div style="max-width: 730px; text-align: left">
              <div class="introducestyle">
                <Editor v-model="formParams.content" style="max-width: 730px" />
              </div>
            </div>
          </el-form-item>
          <div class="flex">
            <div>
              <el-form-item label="附件：" prop="files">
                <UploadFile
                  v-model="formParams.files"
                  :limit="10"
                  type="yaoWen"
                  :fileType="fileType"
                  :isShowTip="false"
                  :fileSize="100"
                />
              </el-form-item>
            </div>
            <div class="upload-tip"
              >最多可上传10个，小于100MB，仅支持doc、docx、xls、xlsx、ppt、pptx、pdf、txt、zip类型文件</div
            >
          </div>
        </el-form>
      </div>
    </div>
    <div class="grid_cont2">
      <el-button
        class="grid_btn"
        @click="gridCancel"
        style="
          background-color: rgba(255, 255, 255, 1);
          border: 1px solid rgba(187, 187, 187, 1);
          color: rgba(142, 142, 142, 1);
        "
        >取消</el-button
      >
      <el-button
        class="grid_btn"
        @click="gridSure"
        style="background-color: #ff9900; border: 1px solid #ff9900; color: #fff"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import * as getNoticeApi from '@/api/noticeAnnouncement/index'
const formParams = reactive({
  announcementType: 1,
  topic: '',
  content: '',
  files: [],
  title: ''
})
const fileType = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf', 'txt', 'zip']
const formRules = reactive({
  announcementType: [{ required: true, message: '分类不能为空！', trigger: 'change' }],
  topic: [{ required: true, message: '标题不能为空！', trigger: 'blur' }],
  content: [{ required: true, message: '内容不能为空！', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
const visible = ref(false)
const treeData = ref([])
const uploadData = ref([])
const upload = ref()
const props = defineProps({
  addShow: {
    type: Boolean,
    default: false
  },
  editData: {
    type: Object
  }
})
const emit = defineEmits(['getaddShow', 'geteditData'])
watch(
  () => props.addShow,
  (val) => {
    visible.value = val
  },
  { immediate: true }
)
// 编辑分类
const editType = (val) => {
  let content = ''
  if (treeData.value) {
    treeData.value.forEach((t) => {
      if (t.value == val) {
        content = t.label
      }
    })
  }
  return content
}
watch(
  () => props.editData,
  (val) => {
    if (val) {
      formParams.topic = val.topic
      formParams.content = val.content
      formParams.title = val.dialogtitle
      treeData.value = val.treeData
      formParams.announcementType = editType(val.announcementType)
      formParams.files = val.fileDOList
      upload.value = val.fileDOList
    }
  },
  { immediate: true }
)

/** 取消按钮操作 */
const gridCancel = () => {
  visible.value = false
  emit('getaddShow', visible.value)
  emit('geteditData', props.editData.pageNo)
}
const handleType = (t) => {
  let content = 1
  treeData.value.forEach((t) => {
    if (t.label == formParams.announcementType) {
      content = t.value
    }
  })
  return content
}
/** 确定按钮操作 */
const gridSure = async () => {
  // 校验表单
  await formRef.value.validate()
  var data = handleType(formParams.announcementType)
  let files = formParams.files ? formParams.files.map((item) => item.id) : []
  const NoticeData = {
    announcementType: data,
    topic: formParams.topic,
    content: formParams.content,
    files: files
  }
  upload.value = NoticeData.files
  if (formParams.title === '新增公告') {
    ElMessageBox.confirm('是否确认新增公告?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(async () => {
        getNoticeApi.createNotice(NoticeData).then((res) => {
          if (res) {
            ElMessage.success('新增成功！')
            emit('geteditData', props.editData.pageNo)
            visible.value = false
            emit('getaddShow', visible.value)
          }
        })
      })
      .catch(() => {
        ElMessage.info('已取消新增公告')
      })
  } else {
    ElMessageBox.confirm('是否确认编辑公告?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(async () => {
        NoticeData.id = props.editData.id
        NoticeData.announcementType = data
        upload.value = NoticeData.files.id
        getNoticeApi.updateNotice(NoticeData).then((res) => {
          if (res) {
            ElMessage.success('修改成功！')
            emit('geteditData', props.editData.pageNo)
            visible.value = false
            emit('getaddShow', visible.value)
          }
        })
      })
      .catch(() => {
        ElMessage.info('已取消编辑公告')
      })
  }
}

onMounted(() => {})
</script>
<style scoped>
.grid_cont {
  min-height: 600px;
  background: #fff;
}

.grid_cont2 {
  width: 100%;
  background: #fff;
  height: 65px;
  justify-content: center;
  align-items: center;
  display: flex;
  padding: 0;
  box-shadow: 0px -2px 6px 0px rgba(188, 188, 188, 0.65);
}

.grid_btn {
  width: 80px;
  height: 30px;
}

.grid_btn:hover {
  opacity: 0.8;
}

::v-deep .el-radio__input.is-checked .el-radio__inner {
  border-color: #cc352f !important;
  background-color: #cc352f !important;
}

::v-deep .el-radio__inner:hover {
  border-color: #cc352f !important;
}

::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #cc352f !important;
}

::v-deep .el-cascader .el-input.is-focus .el-input__wrapper {
  box-shadow: 0 0 0 1px #cc352f !important;
}

.introducestyle {
  box-shadow: 0 0 0 1px var(--el-disabled-border-color);
  border-radius: 4px;
  background: transparent !important;
}

.introducestyle:hover {
  box-shadow: 0 0 0 1px #ccc !important;
}

.introducestyle::selection {
  box-shadow: 0 0 0 1px #cc352f !important;
}

::v-deep .w-e-text-placeholder {
  top: 10px;
  text-align: justify;
  width: 96%;
}

::v-deep .w-e-bar {
  box-shadow: 0px 1px 0px 0px var(--el-disabled-border-color);
}

::v-deep .w-e-bar:hover {
  box-shadow: 0 1px 0 0 #ccc !important;
}

::v-deep .border-solid {
  border-color: #fff;
  border-radius: 4px;
}

::v-deep .upload .el-upload .el-upload-dragger {
  border: 1px solid var(--el-border-color-darker) !important;
}

::v-deep .upload .el-upload .el-upload-dragger:hover {
  border: 1.5px solid #ccc !important;
}

.btnhover:hover {
  opacity: 0.8;
}

.themedata {
  margin-bottom: 20px;
  padding: 0 30px;
}

.theme-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.theme-item:last-child {
  margin-bottom: 0;
}

.theme-content {
  width: calc(100% - 30px);
  border: 1px dashed #868686;
  background: #e4e4e4;
  padding: 20px;
  box-sizing: border-box;
}

.theme-item ::v-deep .el-checkbox__label {
  display: none;
}

.theme-content ::v-deep .el-checkbox__label {
  display: block;
}
.upload-tip {
  line-height: 32px;
  color: rgba(142, 142, 142, 1);
  font-size: 14px;
  text-align: left;
  margin-left: 20px;
  margin-bottom: 10px;
}
</style>
